<template>
  <div class="user-list-container">
    <h1>用户列表</h1>

    <!-- 用户列表表格 -->
    <el-table :data="users" style="width: 100%; table-layout: fixed;">
      <el-table-column prop="stuId" label="学生 ID" :min-width="150"></el-table-column>
      <el-table-column prop="stuName" label="姓名" :min-width="150"></el-table-column>
      <el-table-column prop="sex" label="性别" :min-width="100">
        <template #default="{ row }">
          <span>{{ row.sex ? '男' : '女' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" :min-width="100"></el-table-column>

      <!-- 操作列 -->
      <el-table-column label="操作" :min-width="180">
        <template #default="{ row }">
          <el-button @click="editUser(row)" size="small">编辑</el-button>
          <el-button @click="deleteUser(row.id)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 刷新按钮 -->
    <el-button type="primary" @click="fetchUsers" style="margin-top: 20px;">刷新用户列表</el-button>

    <!-- 错误提示框 -->
    <el-dialog :visible.sync="dialogVisible" title="错误">
      <p>{{ errorMessage }}</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 加载中提示 -->
    <el-loading :loading="loading" lock text="加载中..." background="rgba(255, 255, 255, 0.8)"></el-loading>
  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';

export default {
  name: 'UserView',
  setup() {
    const users = ref([]);
    const loading = ref(false);
    const dialogVisible = ref(false);
    const errorMessage = ref('');

    // 获取用户列表
    const fetchUsers = async () => {
      loading.value = true;
      try {
        const response = await axios.get('http://localhost:8220/yyds/api/User/findAll');
        users.value = response.data;
      } catch (error) {
        console.error('获取用户列表失败:', error);
        dialogVisible.value = true;
        errorMessage.value = '加载用户列表时发生错误，请稍后再试。';
      } finally {
        loading.value = false;
      }
    };

    // 编辑用户
    const editUser = (row) => {
      console.log('编辑用户:', row);
      // 实现编辑功能，通常是通过跳转到编辑页面或弹出编辑对话框
    };

    // 删除用户
    const deleteUser = async (userId) => {
      try {
        await axios.delete(`http://localhost:8220/yyds/api/User/delete/${useId}`);
        fetchUsers(); // 删除成功后刷新列表
      } catch (error) {
        console.error('删除用户失败:', error);
        dialogVisible.value = true;
        errorMessage.value = '删除用户时发生错误，请稍后再试。';
      }
    };

    // 初始化加载用户列表
    fetchUsers();

    return {
      users,
      loading,
      dialogVisible,
      errorMessage,
      fetchUsers,
      editUser,
      deleteUser
    };
  }
};
</script>

<style scoped>
.user-list-container {
  padding: 20px;
  background: rgba(0, 0, 0, 0);
  border-radius: 12px; /* 圆角效果 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* 添加阴影，使容器更立体 */
  color: white; /* 设置文字为白色，与星空背景形成对比 */
  font-family: Arial, sans-serif;
  width: 80%; /* 设置宽度 */
  margin: auto; /* 水平居中 */
}

h1 {
  color: #42b983; /* 标题颜色 */
  text-align: center;
  margin-bottom: 20px;
}

.el-table {
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.2); /* 表格背景透明 */
}

.el-table th, .el-table td {
  color: white; /* 表格文字颜色 */
}

.el-button {
  margin-right: 10px;
}

.dialog-footer {
  text-align: right;
}

.el-dialog {
  width: 50%;
  margin: auto;
  background: rgba(0, 0, 0, 0.7); /* 对话框背景半透明 */
  color: white; /* 对话框文字颜色 */
}

/* 加载中提示 */
.el-loading-spinner {
  border-top-color: #42b983;
}

/* 为表格列和按钮添加间距 */
.el-button + .el-button {
  margin-left: 10px;
}

</style>
